<template>
  <div class="login-head">
    <div class="login-img"></div>
    <div class="about">
      <h3> 流程审批权限系统</h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="account">
          <el-input 
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            v-model="ruleForm.account"
            ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" 
            placeholder="请输入密码"
            prefix-icon="el-icon-user"
          v-model="ruleForm.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import md5 from 'md5'
import {login} from '@/api/http'
import {setToken} from '@/common/token'

export default {
  data(){
    return {
      ruleForm:{
        account:'admin',
        password:'admin@123'
      },
      rules: {  //校验
          account: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
          ],
      }
    }
  },
  methods:{
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {  
            //校验成功
            //md5加密
            this.ruleForm.password = md5(this.ruleForm.password );
            //请求发送
            login(this.ruleForm).then(res=>{
              let {code,data} = res.data;
              if(code == 20000){
                //缓存token
                setToken(data.token);
                this.$router.push("/home"); //跳转到首页
              }
            })
          } else {
            //校验失败
            alert('error submit!!');
            return false;
          }
        });
    }
  }
}
</script>
